<template>
  <section class="studentPane">
   <div class="indexTitle">
      优秀学生
   </div>
    <div class="content">
      <ul class="top20StudentUl">
        <li v-for="(student,index) in students">
          <div class="imgDiv">
            <img :src="getImgUrl(student.imgsrc)">
          </div>
          <div>
            {{student.name}}
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
  import api from "../../../../axios/api.js"
    export default {
        name: "student",
      data(){
        return {
           students:[],
        }
      },
      methods:{
        getImgUrl: function (imgsrc) {
          //idea edit configuration deployement add external source
          return "/api/upload/head/" + imgsrc;
        },
        dateFormat(row, column, cellValue) {
          return utilsFD.FD.Fd().dateFormatCN(cellValue,'yyyy-MM-dd',fecha);
        },
        getTop20Student:function () {
          api.setDataFromAxios("/api/TestWeb/studentController/getTop20Student",null,"get",null).then(
            //默认返回就是response对象
            dto=>{
              this.students = dto.tList;
              this.pageInfo = dto.obj;
            }
          );
        },

      },
      created() {
          this.getTop20Student();
      }
    }
</script>

<style scoped lang="stylus">
  .studentPane
    width 660px;
    /*background-color yellow;*/
    height 280px;
  .indexTitle
    font "微软雅黑" 20px;
    height 36px;
    text-align left
  .content
    position relative
    overflow hidden
    height 388px;
    .top20StudentUl
      position absolute;
      left -24px;
      width 684px;
      margin 0
      padding 0
      li
        font-size 12px;
        width 90px;
        list-style-type none
        margin-left 24px;
        float left
        .imgDiv
          width 90px;
          img
            width 90px;
            height 110px;
      &:after
        clear both
        content ''
        display block
</style>
